<template>
  <div class="health-report">
    <div class="floors-box">
      <div class="floors-header flex-box">
        <div class="header-left">
          <svg-icon name="basic-info" />
          <span class="inline-block">基础信息</span>
        </div>
        <div class="header-right">
          评估时间：
          {{
            healthReport.datetimeStamp
              ? formateTime(healthReport.datetimeStamp)
              : '--'
          }}
        </div>
      </div>
      <div class="floors-content">
        <div class="basic-info">
          <div class="cell">
            <span class="name">{{ healthReport.name }}</span>
            <span class="sex">{{
              healthReport.sex === '1' ? '男' : '女'
            }}</span>
            <span class="age">{{ healthReport.age }}岁</span>
          </div>
          <div class="flex-box cell">
            <span class="label">居民ID</span>
            <span>{{ healthReport.healthCode }}</span>
          </div>
          <div class="flex-box cell">
            <span class="label">身份证号</span>
            <span>{{ healthReport.cardCode }}</span>
          </div>
          <div class="flex-box cell">
            <span class="label">联系方式</span>
            <span>{{ healthReport.telephone }}</span>
          </div>
          <CollapseTransition>
            <div v-show="isUnfold">
              <div class="flex-box cell">
                <span class="label">居住地址</span>
                <span>{{ healthReport.address }}</span>
              </div>
              <div class="flex-box cell">
                <span class="label">签约日期</span>
                <span>{{
                  healthReport.signDate
                    ? formateTime(healthReport.signDate)
                    : '--'
                }}</span>
              </div>
            </div>
          </CollapseTransition>
          <div class="operate">
            <span
              :class="['inline-block isUnfold', isUnfold ? 'is-active' : '']"
              @click="isUnfold = !isUnfold"
              >{{ isUnfold ? '收起' : '查看更多' }}
              <van-icon name="arrow-up" :class="isUnfold ? '' : 'active'" />
            </span>
          </div>
        </div>
        <div class="score-dial">
          <van-circle
            :currentRate="(healthReport.healthIndex / 500) * 100"
            :rate="100"
            :stroke-width="80"
            layer-color="#F7F8FA"
            :color="typeColor(healthReport.dangerLevel)"
          >
            <template #default>
              <div class="score-dial-content">
                <span>健康指数</span>
                <p :style="{ color: typeColor(healthReport.dangerLevel) }">
                  {{ healthReport.healthIndex }}
                </p>
              </div>
            </template>
          </van-circle>
        </div>

        <div class="cell-box">
          <div class="cell-title">健康标签：</div>
          <div class="cell-content">
            <div v-if="healthReport.healthLables.length">
              <span
                class="inline-block orange"
                v-for="(item, index) in healthReport.healthLables"
                :key="index"
                >{{ item }}</span
              >
            </div>
            <span v-else>暂无标签</span>
          </div>
        </div>

        <div class="cell-box">
          <div class="cell-title">管理状态：</div>
          <div class="cell-content">
            高血压{{
              healthReport.isHtpType == '1' ? '在管' : '非在管'
            }}
            、糖尿病{{ healthReport.isDmType == '1' ? '在管' : '非在管' }}
          </div>
        </div>
      </div>
    </div>

    <div class="floors-box orange">
      <div class="floors-header flex-box" @click="toRiskAnalysis('1')">
        <div class="header-left">
          <svg-icon name="高血压" />
          <span class="inline-block">高血压风险分析</span>
        </div>
        <div class="header-right">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <div class="floors-box orange">
      <div class="floors-header flex-box" @click="toRiskAnalysis('2')">
        <div class="header-left">
          <svg-icon name="糖尿病" />
          <span class="inline-block">糖尿病风险分析</span>
        </div>
        <div class="header-right">
          <van-icon name="arrow" />
        </div>
      </div>
    </div>

    <van-collapse v-model="activeNames" :border="false">
      <div class="collapse-box">
        <van-collapse-item :border="false" name="1">
          <template #title>
            <div class="collapse-header">
              <svg-icon name="基本信息" />
              <span class="inline-block">基本信息</span>
            </div>
          </template>
          <div class="collapse-content flex-box">
            <div class="indicator-info">
              <div class="title">
                <svg-icon name="身高" size="20" />
                <span class="inline-block">身高</span>
              </div>
              <div class="contnet">
                <span>{{ healthReport.height }}</span> cm
              </div>
            </div>
            <div class="indicator-info">
              <div class="title">
                <svg-icon name="体重" size="20" />
                <span class="inline-block">体重</span>
              </div>
              <div class="contnet">
                <span>{{ healthReport.weight }}</span> kg
              </div>
            </div>
            <div class="indicator-info">
              <div class="title">
                <svg-icon name="腰围" size="20" />
                <span class="inline-block">腰围</span>
              </div>
              <div class="contnet">
                <span>{{ healthReport.waistline }}</span> cm
              </div>
            </div>
            <div class="indicator-info">
              <div class="title">
                <svg-icon name="血型" size="20" />
                <span class="inline-block">血型</span>
              </div>
              <div class="contnet">
                <span>{{
                  healthReport.bloodType == 1
                    ? 'A型'
                    : healthReport.bloodType == 2
                    ? 'B型'
                    : healthReport.bloodType == 3
                    ? 'O型'
                    : healthReport.bloodType == 4
                    ? 'AB'
                    : '不详'
                }}</span>
              </div>
            </div>
            <div class="indicator-info">
              <div class="title">
                <svg-icon name="BMI" size="20" />
                <span class="inline-block">BMI</span>
              </div>
              <div class="contnet">
                <span>{{ healthReport.bmi }}</span>
              </div>
            </div>
          </div>
        </van-collapse-item>
      </div>

      <div class="collapse-box">
        <van-collapse-item :border="false" name="2">
          <template #title>
            <div class="collapse-header">
              <svg-icon name="不良习惯" />
              <span class="inline-block">不良生活习惯</span>
            </div>
          </template>
          <div class="collapse-content">
            <span
              class="warning-label linline-block orange"
              v-for="(item, index) in healthReport.healthInfo.badHabits"
              :key="index"
              >{{ item }}</span
            >
            <span
              v-if="
                !healthReport.healthInfo.badHabits ||
                healthReport.healthInfo.badHabits.length == 0
              "
              >无</span
            >
          </div>
        </van-collapse-item>
      </div>

      <div class="collapse-box">
        <van-collapse-item :border="false" name="3">
          <template #title>
            <div class="collapse-header">
              <svg-icon name="血压" />
              <span class="inline-block">血压情况</span>
            </div>
          </template>
          <div class="collapse-content">
            <div class="cell-box">
              是否高血压确诊
              <p>
                {{ healthReport.healthInfo.bloodPressureInfo.isHbp }}
                {{
                  healthReport.healthInfo.bloodPressureInfo.level
                    ? `，${healthReport.healthInfo.bloodPressureInfo.level}`
                    : ''
                }}
              </p>
            </div>
            <div class="cell-box">
              高血压风险分层
              <p>
                <span class="warning-label orange">
                  {{ healthReport.highBloodPressureInfo.riskLayer || '无' }}
                </span>
              </p>
            </div>
            <div class="cell-box">
              最近一次血压测量记录
              <div class="flex-box detection-info blue">
                <span><i class="inline-block" />收缩压/舒张压</span>
                <span>
                  {{ healthReport.healthInfo.bloodPressureInfo.sbp }}/{{
                    healthReport.healthInfo.bloodPressureInfo.dbp
                  }}
                  mmHg</span
                >
              </div>
              <div class="flex-box detection-info green">
                <span><i class="inline-block" />心率</span>
                <span
                  >{{
                    healthReport.healthInfo.bloodPressureInfo.heartRate
                  }}次/分</span
                >
              </div>
            </div>
            <div class="cell-box">
              近一年度血压测量正常比例
              <p>
                {{
                  `${healthReport.healthInfo.bloodPressureInfo.normalNum}/${healthReport.healthInfo.bloodPressureInfo.normalDenom}`
                }}
                ({{ filterNum(healthReport.healthInfo.bloodPressureInfo) }}%)
              </p>
            </div>
            <div class="cell-box">
              是否有家族病史
              <p>{{ healthReport.healthInfo.bloodPressureInfo.isFam }}</p>
            </div>
          </div>
        </van-collapse-item>
      </div>

      <div class="collapse-box">
        <van-collapse-item :border="false" name="4">
          <template #title>
            <div class="collapse-header">
              <svg-icon name="血糖" />
              <span class="inline-block">血糖情况</span>
            </div>
          </template>
          <div class="collapse-content">
            <div class="cell-box">
              是否糖尿病确诊
              <p>
                {{ healthReport.healthInfo.bloodSugarInfo.isDm }}
                {{
                  healthReport.healthInfo.bloodSugarInfo.level
                    ? `，${healthReport.healthInfo.bloodSugarInfo.level}`
                    : ''
                }}
              </p>
            </div>
            <div class="cell-box">
              糖尿病风险分层
              <p>
                <span class="warning-label orange">
                  {{ healthReport.diabetesMellitusInfo.riskLayer || '无' }}
                </span>
              </p>
            </div>
            <div class="cell-box">
              最近一次血糖测量记录
              <div class="flex-box detection-info orange">
                <span><i class="inline-block" />空腹血糖</span>
                <span
                  >{{
                    parseFloat(
                      healthReport.healthInfo.bloodSugarInfo.suger
                    ).toFixed(2) || 0
                  }}mmol/L</span
                >
              </div>
            </div>
            <div class="cell-box">
              近一年度血压测量正常比例
              <p>
                {{
                  `${healthReport.healthInfo.bloodSugarInfo.normalNum}/${healthReport.healthInfo.bloodSugarInfo.normalDenom}`
                }}
                ({{ filterNum(healthReport.healthInfo.bloodSugarInfo) }}%)
              </p>
            </div>
            <div class="cell-box">
              是否有家族病史
              <p>{{ healthReport.healthInfo.bloodSugarInfo.isFam }}</p>
            </div>
          </div>
        </van-collapse-item>
      </div>

      <div class="collapse-box">
        <van-collapse-item :border="false" name="5">
          <template #title>
            <div class="collapse-header">
              <svg-icon name="血脂" />
              <span class="inline-block">血脂情况</span>
            </div>
          </template>
          <div class="collapse-content">
            <div class="cell-box">
              血清总胆固醇（CT）
              <p>{{ healthReport.healthInfo.bloodFatInfo.tc || 0 }}mmol/L</p>
            </div>
            <div class="cell-box">
              低密度脂蛋白胆固醇（LDL-C）
              <p>{{ healthReport.healthInfo.bloodFatInfo.ldl || 0 }}mmol/L</p>
            </div>
            <div class="cell-box">
              相关病史
              <p>
                <span
                  v-for="(item, index) in healthReport.healthInfo.bloodFatInfo
                    .relateDisease"
                  :key="index"
                  style="margin-right: 5px; font-size: 12px"
                >
                  {{ item }}
                </span>
                <span
                  v-if="
                    !healthReport.healthInfo.bloodFatInfo.relateDisease.length
                  "
                  >无</span
                >
              </p>
            </div>
          </div>
        </van-collapse-item>
      </div>

      <div class="collapse-box">
        <van-collapse-item :border="false" name="6">
          <template #title>
            <div class="collapse-header">
              <svg-icon name="氨酸" />
              <span class="inline-block">同型半胱氨酸</span>
            </div>
          </template>
          <div class="collapse-content">
            {{ healthReport.healthInfo.gtxbgas }}µmol/L
          </div>
        </van-collapse-item>
      </div>

      <div class="collapse-box">
        <van-collapse-item :border="false" name="7">
          <template #title>
            <div class="collapse-header">
              <svg-icon name="疾病史" />
              <span class="inline-block">疾病史（非两慢病并发症）</span>
            </div>
          </template>
          <div class="collapse-content">
            <span
              class="inline-block"
              v-for="(item, index) in healthReport.healthInfo.disease"
              :key="index"
              >{{ `${item}、` }}</span
            >
            <span v-if="healthReport.healthInfo.disease.length === 0">无</span>
          </div>
        </van-collapse-item>
      </div>

      <div class="collapse-box">
        <van-collapse-item :border="false" name="8">
          <template #title>
            <div class="collapse-header">
              <svg-icon name="危险信息" />
              <span class="inline-block">其他危险信息</span>
            </div>
          </template>
          <div class="collapse-content">
            <span
              v-for="(item, index) in healthReport.healthInfo.otherDanger"
              :key="index"
              class="inline-block"
              >{{ `${item}、` }}</span
            >
            <span
v-if="healthReport.healthInfo.otherDanger.length === 0"
              >无</span
            >
          </div>
        </van-collapse-item>
      </div>
    </van-collapse>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  getCurrentInstance,
  onMounted,
  reactive,
  toRefs
} from 'vue'
import { useRoute, useRouter } from 'vue-router'
import CollapseTransition from '@/components/CollapseTransition/index.vue' // 折叠面板
import { parseTime } from '@/utils'

import { useStore } from 'vuex'

export default defineComponent({
  name: 'HealthReport',
  components: { CollapseTransition },
  setup() {
    const { proxy } = getCurrentInstance() as any
    const router = useRouter()
    const store = useStore()
    // 从store中拿healthReport
    // const healthReport = computed(() => {
    //   return JSON.parse(store.state.healthReport)
    // })
    const state = reactive({
      healthReport: computed(() => {
        return JSON.parse(store.state.healthReport)
      }),
      isUnfold: false, // 基础信息查看更多
      currentRate: 40, // 当前健康指数
      activeNames: ['1'] // 展开想
    })
    // 时间格式化
    const formateTime = computed(() => {
      return (val: string | number | Date) => {
        return parseTime(new Date(val), '{y}-{m}-{d}')
      }
    })
    // 患者分层颜色
    const typeColor = (type: string) => {
      const list = {
        红: '#FF3546',
        橙: '#ff7410',
        黄: '#FFDD03',
        蓝: '#0093FF'
      }
      return list[type]
    }

    // 分母格式化 分母不能为0
    const filterNum = (item: { normalDenom: number, normalNum: number }) => {
      if (item.normalDenom * 1 === 0) {
        return '0.00'
      } else {
        return (((item.normalNum * 1) / item.normalDenom) * 1 * 100).toFixed(2)
      }
    }

    onMounted(() => {
      const { query } = useRoute()
      getHealthReport(query)
    })

    const getHealthReport = (query: any) => {
      proxy.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      store
        .dispatch('getHealthReport', query)
        .then(() => {
          proxy.$toast.clear()
        })
        .catch((err) => {
          console.log('err:', err)
          proxy.$toast.clear()
          proxy.$toast.fail(err.message || '获取失败')
        })
    }

    /**
     * @description 路由跳转 查看风险分析
     * @type 1:高血压风险分析 2糖尿病风险分析
     */
    const toRiskAnalysis = (type: number | string) => {
      router.push({ path: '/riskAnalysis', query: { type: type }})
    }

    return {
      ...toRefs(state),
      formateTime,
      filterNum,
      typeColor,
      toRiskAnalysis,
      getHealthReport
    }
  }
})
</script>

<style lang="scss" scoped>
$greyBg: #f7f8fa;
$valColor: #999999;
$labelColor: #070707;
.health-report {
  padding: 10px 16px;
  font-size: 14px;
  .floors-box {
    padding: 16px;
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 10px;
    .floors-header {
      color: $valColor;
      .header-left {
        font-size: 16px;
        color: #070707;
        span {
          padding-left: 8px;
        }
      }
    }
    .floors-content {
      margin-top: 16px;
      .basic-info {
        padding: 16px;
        background: $greyBg;
        border-radius: 8px;
        .cell {
          color: $valColor;
          padding-bottom: 10px;
          &:last-child {
            padding: 0;
          }
          .name {
            color: #070707;
            font-size: 16px;
            margin-right: 16px;
          }
          .sex {
            margin-right: 16px;
          }
          .label {
            color: #333333;
          }
          span:last-child {
            width: 68%;
          }
        }
        .operate {
          text-align: center;
          color: $valColor;
          .isUnfold {
            margin-left: 15px;
            i {
              font-size: 14px;
              transition: all 0.5s;
              &.active {
                transform: rotate(180deg);
              }
            }
          }
        }
      }
      .score-dial {
        text-align: center;
        padding: 32px 0;
        .score-dial-content {
          height: 120px;
          padding: 30px 0;
          span {
            color: $valColor;
          }
          p {
            font-size: 28px;
            font-weight: 500;
            color: #ff7410;
          }
        }
      }
      .cell-box {
        padding-bottom: 15px;
        &:last-child {
          padding: 0;
        }
        .cell-title {
          font-size: 15px;
          font-weight: 500;
          color: #333333;
          padding-bottom: 8px;
        }
        .cell-content {
          color: $valColor;
          line-height: 20px;
          span {
            font-size: 13px;
            border-radius: 4px;
            padding: 5px 6px;
            margin-right: 14px;
            display: inline-block;
            margin-bottom: 5px;
          }
          span.orange {
            color: #ff4b25;
            background: rgba(255, 73, 37, 0.1);
          }
        }
      }
    }
  }

  .floors-box.orange {
    background: rgba(255, 73, 37, 0.1);
    .header-left {
      color: #ff4b25;
    }
    &:active {
      background: rgba(255, 73, 37, 0.2);
    }
  }

  .collapse-box {
    background: #ffffff;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    .collapse-header {
      font-size: 16px;
      color: #070707;
      span {
        padding-left: 8px;
      }
    }
    .collapse-content {
      padding: 0 16px 16px;
      &:after {
        content: '';
        width: 100px;
      }
      .indicator-info {
        width: 100px;
        height: 114px;
        padding: 15px 11px;
        background: #f7f8fa;
        border-radius: 8px;
        margin-bottom: 6px;
        .title {
          color: #007aff;
          font-size: 12px;
        }
        .contnet {
          color: $valColor;
          padding-top: 23px;
          span {
            font-size: 18px;
            color: #333333;
          }
        }
      }
      .cell-box {
        font-size: 15px;
        color: #333333;
        margin-bottom: 18px;
        &:last-child {
          margin-bottom: 0;
        }
        p {
          font-size: 14px;
          color: $valColor;
          padding: 8px 0 0;
        }
      }
    }
  }

  .warning-label {
    font-size: 13px;
    border-radius: 4px;
    padding: 5px 6px;
    margin-right: 14px;
    display: inline-block;
    margin-bottom: 5px;
    &.orange {
      color: #ff4b25;
      background: rgba(255, 73, 37, 0.1);
    }
  }

  .detection-info {
    border-radius: 6px;
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    &.orange {
      color: #ff4b25;
      background: rgba(255, 73, 37, 0.1);
      i {
        background: #ff4b25;
      }
    }
    &.blue {
      color: #007aff;
      background: rgba(0, 123, 255, 0.1);
      i {
        background: #007aff;
      }
    }
    &.green {
      color: #02beb7;
      background: rgba(2, 190, 184, 0.1);
      i {
        background: #02beb7;
      }
    }
    i {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      margin-right: 8px;
    }
  }
}
</style>
